<template>
    <!-- 添加或修改企业对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body custom-class="show-back-class">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="上级企业" prop="parentId" >
          <treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" :show-count="true" placeholder="选择上级菜单"/>
        </el-form-item>
        <el-form-item label="企业名称" prop="enterpriseName">
          <el-input v-model="form.enterpriseName" placeholder="请输入企业名称" />
        </el-form-item>
        <el-form-item label="企业类型" prop="enterpriseType">
          <el-select v-model="form.enterpriseType" placeholder="请选择企业类型" style="width: 100%">
            <el-option class="index-option" v-for="dict in  $store.state.referenceDict.enterpriseType" :key="dict.dictValue"
                       :label="dict.dictLabel" :value="parseInt(dict.dictValue)" />
          </el-select>
        </el-form-item>
        <el-form-item label="企业状态" prop="enterpriseStatus">
          <el-select v-model="form.enterpriseStatus" placeholder="请选择企业状态" style="width: 100%">
            <el-option class="index-option" v-for="dict in  $store.state.referenceDict.enterpriseStatus" :key="dict.dictValue"
                       :label="dict.dictLabel" :value="parseInt(dict.dictValue)" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
</template>

<script>
import {listEnterprise,getEnterprise, addEnterprise, updateEnterprise} from "@/api/enterprise/enterprise";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "Enterprise",
  components: { Treeselect,  },
  data() {
    const equalToId = (rule, value, callback) => {
      if (this.form.id === value) {
        callback(new Error("上级企业不能选择当前企业"));
      } else {
        callback();
      }
    };
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        enterpriseName: [{ required: true, trigger: "blur", message: "请输入企业名称" } ],
        enterpriseType: [{ required: true, trigger: "change", message: "请选择企业类型" } ],
        enterpriseStatus: [{ required: true, trigger: "change", message: "请选择企业状态" } ],
        parentId: [{ required: true, trigger: "change", message: "请选择上级企业" },
          { required: true, validator: equalToId, trigger: "change" }],
      },
      menuOptions:[],
    };
  },
  created() {

  },
  methods: {
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.enterpriseName,
        children: node.children
      };
    },
    selectEnterpriseDict(){
      listEnterprise().then(response=>{
          this.menuOptions = [];
          const menu = { id: 0, enterpriseName: '主类目', children: [] };
          menu.children = this.handleTree(response.rows);
          this.menuOptions.push(menu);
        });
      },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        parentId: 0,
        enterpriseName: null,
        enterpriseType: null,
        enterpriseStatus: 1,
        creationTime: null,
        deleteTime: null
      };
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.selectEnterpriseDict();
      this.reset();
      this.open = true;
      this.title = "添加企业";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.selectEnterpriseDict();
      this.reset();
      const id = row.id || this.ids
      getEnterprise(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改企业";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateEnterprise(this.form).then(response => {
              if (response.code === '200') {
                this.msgSuccess("修改成功");
                this.open = false;
                this.$emit("fatherGoPath");
              }
            });
          } else {
            addEnterprise(this.form).then(response => {
              if (response.code === '200') {
                this.msgSuccess("新增成功");
                this.open = false;
                this.$emit("fatherGoPath");
              }
            });
          }
        }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
/deep/ .vue-treeselect {
  .vue-treeselect__control {
    background: #17506a !important;
    border: 1px solid #4ec3ff !important;
    color: #fff !important;
    border-radius: 4px;
  }
  .vue-treeselect__placeholder,
  .vue-treeselect__single-value {
    color: #fff !important;
  }
  .vue-treeselect__input {
    color: #fff !important;
    background: transparent !important;
  }
  .vue-treeselect__x {
    color: #fff !important;
  }
}
// 下拉菜单
/deep/ .vue-treeselect__menu {
  background: #17506a !important;
  border: 1px solid #4ec3ff !important;
  color: #fff !important;
}
// 普通选项
/deep/ .vue-treeselect__option {
  color: #fff !important;
  background: #17506a !important;
  transition: background 0.2s;
}
// 悬停时
/deep/ .vue-treeselect__option--highlight {
  background: #2496c9 !important;
  color: #fff !important;
}

// 选中项
/deep/ .vue-treeselect__option--selected {
  background: #2496c9 !important;
  color: #fff !important;
}

// 禁用项
.vue-treeselect__option--disabled {
  color: #888 !important;
  background: #17506a !important;
}
</style>